<template>

  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>项目合作</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/product">项目列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	</div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>项目列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span :class="{ 'color-theme': page.checkStatus == '' }" class="app-tab app-margin-r-40" @click="selectTabStatus('')">全部</span>
        <span :class="{ 'color-theme': page.checkStatus == 'NOT' }" class="app-tab app-margin-r-40" @click="selectTabStatus('NOT')">未审核</span>
        <span :class="{ 'color-theme': page.checkStatus == 'PASS' }" class="app-tab app-margin-r-40" @click="selectTabStatus('PASS')">审核通过</span>
        <span :class="{ 'color-theme': page.checkStatus == 'FAIL' }" class="app-tab app-margin-r-40" @click="selectTabStatus('FAIL')">不通过</span>
        <span :class="{ 'color-theme': page.checkStatus == 'END' }" class="app-tab app-margin-r-40" @click="selectTabStatus('END')">已结束</span>
        <span :class="{ 'color-theme': page.checkStatus == 'DELETE' }" class="app-tab app-margin-r-40" @click="selectTabStatus('DELETE')">已删除</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input clearable placeholder="产品名、公司名、联系人手机" v-model="page.keyWord" style="width: 380px;"></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
                  type="primary"
                  plain
                  icon="el-icon-search"
                  :post-option="{
							url: searchUrl,
							data: page,
							callback: searchCB
						}"
          >
            搜索
          </SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <el-table :data="projectList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod"></el-table-column>
        <!--<el-table-column label="公司" width="200" prop="company_name"/>-->
        <el-table-column label="发布人" width="150" prop="name"/>
        <el-table-column label="联系人" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.contact_name }}</span>
            <br />
            <span>{{ scope.row.contact_phone }}</span>
            <span v-if="scope.row.contact_email !== ''">&nbsp;<br/>{{ scope.row.contact_email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目" width="250">
          <template slot-scope="scope">
            <span class="text-bold">{{ scope.row.project_name }}</span>
            <br />
            <span>{{ scope.row.project_description }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" prop="end_date_time" label="有效日期">
          <template slot-scope="scope">
            <span>{{ scope.row.start_date_time }}</span>
            <br />
            ~
            <br />
            <span>{{ scope.row.end_date_time }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" label="发布日期" prop="add_date_time"/>
        <el-table-column sortable="custom" label="审核|有效状态" prop="check_status">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
              <span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
              <span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
              <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
              &nbsp;|&nbsp;
              <span class="text-bold color-danger" v-if="scope.row.is_time_out == 1">已结束</span>
              <span class="text-bold color-success" v-if="scope.row.is_time_out == 0">未结束</span>
              <br/>
              <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">原因：{{scope.row.check_status_explain}}</span>
            </div>
            <span class="text-bold color-danger" v-if="scope.row.is_delete == 'YES'">已删除</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
              <el-button v-if="scope.row.check_status != 'PASS'" type="success" plain size="mini" @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>
              <el-button v-if="scope.row.check_status != 'FAIL'" type="warning" plain size="mini" @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
              <NcButton
                      v-if="scope.row.is_time_out == 0"
                      size="mini"
                      type="danger"
                      :post-option="{ url: endUrl, callback: getPage, confirm: '确定要结束项目合作【' + scope.row.project_name + '】吗？', data: { id: scope.row.id } }"
                      class="app-margin-l-10 app-margin-v-5"
              >
                结束
              </NcButton>

              <NcButton
                      v-if="role > 1"
                      size="mini"
                      type="danger"
                      :post-option="{ url: deleteUrl, callback: getPage, confirm: '确定要删除项目合作【' + scope.row.project_name + '】吗？', data: { id: scope.row.id } }"
                      class="app-margin-l-10 app-margin-v-5"
              >
                删除
              </NcButton>
              <a class="" :href="'#/project/detail/' + scope.row.id" target="_blank"><el-button plain size="mini">详情</el-button></a>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

    <CheckStatusEdit :is-show="checkStatusEditVisible" :activity-obj="editProduct" :check-yes="checkYes"></CheckStatusEdit>

  </div>

</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';
import CheckStatusEdit from './CheckStatusEditDialog';

import Api from '../../api/Api';
import ProjectApi from '../../api/ProjectApi';

import JsonKit from '../../kit/JsonKit';

import { mapGetters } from 'vuex';
//需要导入vuex的数据管理
import Store from '../../store/index.js'

export default {
	components: {
		NcButton,
		SubmitButton,
		CheckStatusEdit
	},
	data() {
		return {
            projectList: [],

			page: {
                checkStatus: '',
				keyWord: '',
				pageNum: 1,
				pageSize: 10
			},

			checkStatusEditVisible: false,
			checkYes: 0,
			editProduct: {},

			searchUrl: ProjectApi.URL_LIST,
			deleteUrl: ProjectApi.URL_DELETE,
            endUrl: ProjectApi.URL_END,

			role: 0
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();
		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
		this.role = Store.state.user.role;
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.projectList = json.list;
			this.setPage(json);
		},
		getPage() {
            ProjectApi.list(this.page, json => {
				this.projectList = json.list;
				this.setPage(json);
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		},
		selectTabStatus(checkStatus) {
			this.page.checkStatus = checkStatus;
			this.page.pageNum = 1;
			this.getPage();
		},
		checkStatusHandle(id, checkYes) {
			this.editProduct = JsonKit.getOf(this.projectList, 'id', id, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editProduct = {};

			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
